<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:replace="header/header :: header(${title} != null ? ${title} : '帅小铺-实体商户社群服务平台',
'/assets/layui/css/layui.css,/assets/module/admin.css,/assets/css/comment.css',
'/assets/js/timeformat.js,
/assets/libs/index/app.js?v=2')">
</head>
<body class="theme-my" data-theme="theme-my">
<th:block th:if="${resources == null}">
<style>
#root, body, html{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.preview-error {
    font-family: -apple-system,helvetica,sans-serif;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 176px;
}
.preview-error .preview-error-icon {
    width: 100px;
    height: 72px;
    margin-bottom: 4px;
}
.preview-error .preview-error-message {
    font-size: 15px;
    color: #999;
    margin-bottom: 24px;
}
.preview-error .tt-darkmode-preview-error-btn {
    color: #fff;
}
.preview-error .preview-error-btn {
    height: 28px;
    border-radius: 2px;
    background-color: #f04142;
    font-size: 14px;
    line-height: 28px;
    color: #fff;
    padding: 0 16px;
    cursor: pointer;
}
</style>
</th:block>
<!-- 顶部导航 statr -->
<div th:replace="common/index/indexbar :: indexbar"></div>
<!-- 顶部导航 end -->
<!--头条主体 statr -->
<th:block th:if="${resources != null}">
	<div class="content">
		<input type="hidden" th:value="${resources.videoEtag}" id="videoEtag">
		<div class="wrapper contDiaryTop">
			<th:block th:if="${user != null}">
				<input type="hidden" th:value="${user.userId}" id="uuserId">
				<input type="hidden" th:value="${user.avatar}" id="uavatar">
				<input type="hidden" th:value="${user.nickName}" id="unickName">
			</th:block>
			<!-- 概况 start -->
			<div class="general-item general-intro" style="margin-bottom: 20px;" id="intro" th:if="${resources.columnId != 1}">
				<h3>
					<em></em>概况
				</h3>
				<ul class="general-item-wrap">
					<li class="intro-item" th:if="${resources.rent != null && resources.rent != ''}">
						<span class="title">租金：</span> 
						<span class="content" th:text="${resources.rent}"></span>
					</li>
					<li class="intro-item" th:if="${resources.totalPrice != null && resources.totalPrice != ''}">
						<span class="title">总价：</span> 
						<span class="content" th:text="${resources.totalPrice}"></span>
					</li>
					<li class="intro-item" th:if="${resources.transferFee != null && resources.transferFee != ''}">
						<span class="title">转让费：</span> 
						<span class="content" th:text="${resources.transferFee}"></span>
					</li>
					<li class="intro-item" th:if="${resources.area != null && resources.area != ''}">
						<span class="title">面积：</span> 
						<span class="content" th:text="${resources.area}"></span>
					</li>
					<li class="intro-item" th:if="${resources.propertyName != null && resources.propertyName != ''}">
						<span class="title">楼盘名称：</span> 
						<span class="content" th:text="${resources.propertyName}"></span>
					</li>
					<li class="intro-item" th:if="${resources.serviceItemsName != null && resources.serviceItemsName != ''}">
						<span class="title">服务项目：</span> 
						<span class="content" th:text="${resources.serviceItemsName}"></span>
					</li>
					<li class="intro-item" th:if="${resources.address != null && resources.address != ''}">
						<span class="title">地址：</span> 
						<span class="content" th:if="${resources.countyName != null && resources.countyName != ''}" th:text="${resources.countyName + '-' + resources.address}"></span>
						<span class="content" th:if="${resources.countyName == null || resources.countyName == ''}" th:text="${resources.address}"></span>
					</li>
					<li class="intro-item" th:if="${resources.shopNum != null && resources.shopNum != ''}">
						<span class="title">商品数量：</span>
						<span class="content" th:text="${resources.shopNum}"></span>
					</li>
					<li class="intro-item" th:if="${resources.rangTime != null && resources.rangTime != ''}">
						<span class="title">活动时间：</span> 
						<span class="content" th:text="${resources.rangTime}"></span>
					</li>
					<li class="intro-item" th:if="${resources.contacts != null && resources.contacts != ''}">
						<span class="title">联系人：</span> 
						<span class="content" th:text="${resources.contacts}"></span>
					</li>
					<li class="intro-item" th:if="${resources.telephone != null && resources.telephone != ''}">
						<span class="title">联系电话：</span> 
						<span class="content" id="btnshow">
							<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="shoePhone">
								<i class="layui-icon layui-icon-cellphone-fine"></i> 
								电话联系TA
							</button>
						</span>
						<span class="content layui-hide" id="telephone" th:text="${resources.telephone}"></span>
					</li>
				</ul>
			</div>
			<!-- 概况 end -->
		
			<!-- 详情页  -->
			<div class="detailsPage">
				<!-- 文章内容 start -->
				<div class="detailsCon" id="detailsCon">
					<h1 class="detailsCon-h1" th:attr="data-articleid=${resources.articleId}" th:text="${resources.title}"></h1>
					<div class="detailsCon-info">
						<div class="detailsCon-infoL">
							<div>
								<a class="detailsCon-infoLA" th:if="${resources.user != null}" th:href="${'/t/' + resources.user.userId}"> 
									<img class="detailsCon-infoLAImg" th:src="${resources.user.avatar}" alt="" /> 
									<div class="detailsCon-infoLAd">
									    <span class="detailsCon-infoLAs" th:text="${resources.user.nickName}"></span>
									    <span class="detailsCon-infoLAs2" th:text="${resources.user.label == null || resources.user.label == '' ? '暂无' : resources.user.label}"></span>
									</div>
								</a>
							</div>
							<ul class="detailsCon-infoL-ul" th:if="${not #lists.isEmpty(resources.tbs)}">
							    <li class="detailsCon-infoL-li" th:each="lab:${resources.tbs}" th:text="${lab}"></li>
							</ul>
						</div>
						<div class="detailsCon-infoR">
							<ul>
								<th:block th:if="${user == null}">
									<li class="tag detailsCon-infoRLi" lay-event="follow" th:attr="data-userid=${resources.user.userId}">							
										<span>+关注</span>
									</li>
								</th:block>
								<th:block th:if="${user != null}">
									<li class="tag detailsCon-infoRLi" lay-event="follow" th:attr="data-userid=${resources.user.userId}" th:if="${!resources.user.mutual && resources.user.userId != user.userId}">							
										<span>+关注</span>
									</li>
									<li class="tag detailsCon-infoRLi" lay-event="unfollow" th:attr="data-userid=${resources.user.userId}" th:if="${resources.user.mutual && resources.user.userId != user.userId}">							
										<span>✓已关注</span>
									</li>
								</th:block>
								<li class="detailsCon-infoRLi">
									<span class="detailsCon-infoRLiS" th:text="${#temporals.format(resources.createTime,'yyyy-MM-dd HH:mm')}"></span>
								</li>
							</ul>
						</div>
					</div>
					<!-- 内容详情 statr -->
					<div class="detailsCon-Text">
						<article style="margin-top: 10px;" th:utext="${resources.content}"></article>
					</div>
					<!-- 内容详情 end -->
				</div>
				<!-- 文章内容 end -->
			</div>
			<!-- 详情页 end -->
		</div>
	</div>
	<!--头条主体 end -->
	<!-- 回到顶部 start -->
	<div th:replace="common/channel/backTop :: backTop"></div>
	<!-- 回到顶部 end -->
</th:block>

<th:block th:if="${resources == null}">
	<div id="root">
		<div class="App">
			<div class="preview-error">
				<img class="preview-error-icon" alt="error-icon" src="/assets/images/error.8dbcb46d.png">
				<div class="preview-error-message">加载失败，请重试</div>
				<div class="tt-darkmode-preview-error-btn preview-error-btn">重试</div>
			</div>
		</div>
	</div>
</th:block>

<script th:inline="javascript">
  layui.use(['Player', 'form', 'ax', 'mynotice', 'admin'], function () {
        var Player = layui.Player;
        var form = layui.form;
        var $ax = layui.ax;
        var mynotice = layui.mynotice;
        var $ = layui.jquery;
        var admin = layui.admin;
        
        var etagsStr = $('#videoEtag').val();
        var uid = $('#uuserId').val();
        var avatar = $('#uavatar').val();
        var nickName = $('#unickName').val();
        var etags = [];
        if(etagsStr){
        	etags = JSON.parse(etagsStr);
        }
        $.each(etags, (i, v) => {
        	var elem = '#v_' + v;
        	var poster = $(elem).children("video").eq(0).attr('poster');
        	var src = $(elem).children("video").eq(0).children("source").eq(0).attr('src');
        	$(elem).html('');
        	$(elem).css("margin-bottom","10px");  
        	// 视频播放器
 	        var player = new Player({
 	            id: "v_" + v,
 	            url: src,  // 视频地址
 	            poster: poster,  // 封面
 	            fluid: true,  // 宽度100%
 	            width: 600, // 播放器的宽度 默认600
 	            height: 337.5, // 播放器的高度 默认337.5
 	            playbackRate: [0.5, 1, 1.5, 2],  // 开启倍速播放
 	            pip: true,  // 开启画中画
 	            lang: 'zh-cn'
 	        });
        })
        
        $('.tt-darkmode-preview-error-btn').on('click', function(){
        	$('.preview-error').empty();
        	window.location.reload();
        })
     	
  })
</script>

	
</body>
</html>